<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="tophead">
    <link rel="shortcut icon"
          th:href="@{/images/favicon.ico}">
    <link th:href="@{/css/font-awesome.css}"
          rel="stylesheet">
    <link th:href="@{/css/base.css}" rel="stylesheet">
    <link th:href="@{/css/index.css}"
          rel="stylesheet">
    <link th:href="@{/css/m.css}" rel="stylesheet">
    <script
            src="https://hm.baidu.com/hm.js?f655f558c510211e38805f6b586e6b15"></script>
    <script
            th:src="@{/js/jquery-1.8.3.min.js}"></script>
    <script th:src="@{/js/comm.js}"></script>
    <style>
        * {
            cursor: url('/images/ani/a.cur'), auto;
        }

        a {
            cursor: url('/images/ani/b.cur'), auto;
        }
    </style>
</head>
<body>
<div th:fragment="top">
    <header id="header">
        <div class="navbox">
            <h2 id="mnavh">
                <span class="navicon"></span>
            </h2>
            <div class="logo" id="logo">
                <a id="loga" href="/">心悦君兮 | <font id="binft" class="font16">醉后不知天在水，满船清梦压星河</font></a>
            </div>
            <nav>
                <ul id="starlist">
                    <li><a href="/index" title="首页">网站首页</a></li>
                    <li><a href="/list">技术博客</a></li>
                    <li class="menu"><a href="/result?keyboard=type_1">技术专栏</a>
                        <ul class="sub">
                            <li></li>
                        </ul>
                        <span></span></li>
                    <li><a href="/resource">资源分享</a></li>
                    <li><a href="/find/13015.html">网站介绍</a></li>
                    <li><a href="/about">关于我</a></li>
                    <li><a href="/message">留言</a></li>
                    <li><a href="/admin">登录</a></li>
                </ul>
            </nav>
            <div class="searchico"></div>
        </div>
    </header>

    <div class="searchbox">
        <div class="search">
            <form action="/result" name="searchform" method="get"
                  id="searchform">
                <input name="keyboard" id="keyboard" class="input_text"
                       value="请输入关键字词" style="color: rgb(153, 153, 153);"
                       onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
                       onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}"
                       type="text">
                <input type="submit" class="input_submit"
                       value="搜索">
            </form>
        </div>
        <div class="searchclose"></div>
    </div>


    <script type="text/javascript">

        $(function () {
            /*通过hover（mouseenter+mouseleave）实现简写*/
            $('#logo').hover(function () {
                $('#logo').html('<a href="/">心悦君兮 | <font id="binft" class="font16">等闲变却故人心，却道故人心易变</font></a>');
                /*var binft = function (r) {
                    function t() {
                        return b[Math.floor(Math.random() * b.length)]
                    }

                    function e() {
                        return String.fromCharCode(94 * Math.random() + 33)
                    }

                    function n(r) {
                        for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                            var l = document.createElement("span");
                            l.textContent = e(), l.style.color = t(), n.appendChild(l)
                        }
                        return n
                    }

                    function i() {
                        var t = o[c.skillI];
                        c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) :
                            "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c
                                .direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI =
                                (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
                            Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
                    }

                    var l = "",
                        o = ["山有木兮木有枝，心悦君兮君不知。",
                            "愿我如星君如月，夜夜流光相皎洁。",
                            "陌上花开，可缓缓归矣。",
                            "玲珑骰子安红豆，入骨相思知不知。",
                            "曾经沧海难为水，除却巫山不是云。",
                            "多情自古伤离别，更那堪，冷落清秋节",
                            "月上柳梢头，人约黄昏后。",
                            "等闲变却故人心，却道故人心易变。"
                        ].map(function (r) {
                            return r + ""
                        }),
                        a = 2,
                        g = 1,
                        s = 5,
                        d = 75,
                        b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
                            "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)",
                            "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)",
                            "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
                        ],
                        c = {
                            text: "",
                            prefixP: -s,
                            skillI: 0,
                            skillP: 0,
                            direction: "forward",
                            delay: a,
                            step: g
                        };
                    i()
                };
                binft(document.getElementById('binft'));*/




                /*样式二*/
                /* 控制下雪 */
           /*     function snowFall(snow) {
                    /!* 可配置属性 *!/
                    snow = snow || {};
                    this.maxFlake = snow.maxFlake || 200;   /!* 最多片数 *!/
                    this.flakeSize = snow.flakeSize || 10;  /!* 雪花形状 *!/
                    this.fallSpeed = snow.fallSpeed || 1;   /!* 坠落速度 *!/
                }
                /!* 兼容写法 *!/
                requestAnimationFrame = window.requestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    function(callback) { setTimeout(callback, 1000 / 60); };

                cancelAnimationFrame = window.cancelAnimationFrame ||
                    window.mozCancelAnimationFrame ||
                    window.webkitCancelAnimationFrame ||
                    window.msCancelAnimationFrame ||
                    window.oCancelAnimationFrame;
                /!* 开始下雪 *!/
                snowFall.prototype.start = function(){
                    /!* 创建画布 *!/
                    snowCanvas.apply(this);
                    /!* 创建雪花形状 *!/
                    createFlakes.apply(this);
                    /!* 画雪 *!/
                    drawSnow.apply(this)
                }
                /!* 创建画布 *!/
                function snowCanvas() {
                    /!* 添加Dom结点 *!/
                    var snowcanvas = document.createElement("canvas");
                    snowcanvas.id = "snowfall";
                    snowcanvas.width = window.innerWidth;
                    snowcanvas.height = document.body.clientHeight;
                    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
                    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
                    this.canvas = snowcanvas;
                    this.ctx = snowcanvas.getContext("2d");
                    /!* 窗口大小改变的处理 *!/
                    window.onresize = function() {
                        snowcanvas.width = window.innerWidth;
                        /!* snowcanvas.height = window.innerHeight *!/
                    }
                }
                /!* 雪运动对象 *!/
                function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
                    this.x = Math.floor(Math.random() * canvasWidth);   /!* x坐标 *!/
                    this.y = Math.floor(Math.random() * canvasHeight);  /!* y坐标 *!/
                    this.size = Math.random() * flakeSize + 2;          /!* 形状 *!/
                    this.maxSize = flakeSize;                           /!* 最大形状 *!/
                    this.speed = Math.random() * 1 + fallSpeed;         /!* 坠落速度 *!/
                    this.fallSpeed = fallSpeed;                         /!* 坠落速度 *!/
                    this.velY = this.speed;                             /!* Y方向速度 *!/
                    this.velX = 0;                                      /!* X方向速度 *!/
                    this.stepSize = Math.random() / 30;                 /!* 步长 *!/
                    this.step = 0                                       /!* 步数 *!/
                }
                flakeMove.prototype.update = function() {
                    var x = this.x,
                        y = this.y;
                    /!* 左右摆动(余弦) *!/
                    this.velX *= 0.98;
                    if (this.velY <= this.speed) {
                        this.velY = this.speed
                    }
                    this.velX += Math.cos(this.step += .05) * this.stepSize;

                    this.y += this.velY;
                    this.x += this.velX;
                    /!* 飞出边界的处理 *!/
                    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
                        this.reset(canvas.width, canvas.height)
                    }
                };
                /!* 飞出边界-放置最顶端继续坠落 *!/
                flakeMove.prototype.reset = function(width, height) {
                    this.x = Math.floor(Math.random() * width);
                    this.y = 0;
                    this.size = Math.random() * this.maxSize + 2;
                    this.speed = Math.random() * 1 + this.fallSpeed;
                    this.velY = this.speed;
                    this.velX = 0;
                };
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
                flakeMove.prototype.render = function(ctx) {
                    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
                    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /!* 此处是雪花颜色，默认是白色 *!/
                    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /!* 若要改为其他颜色，请自行查 *!/
                    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /!* 找16进制的RGB 颜色代码。 *!/
                    ctx.save();
                    ctx.fillStyle = snowFlake;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.restore();
                };
                /!* 创建雪花-定义形状 *!/
                function createFlakes() {
                    var maxFlake = this.maxFlake,
                        flakes = this.flakes = [],
                        canvas = this.canvas;
                    for (var i = 0; i < maxFlake; i++) {
                        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
                    }
                }
                /!* 画雪 *!/
                function drawSnow() {
                    var maxFlake = this.maxFlake,
                        flakes = this.flakes;
                    ctx = this.ctx, canvas = this.canvas, that = this;
                    /!* 清空雪花 *!/
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    for (var e = 0; e < maxFlake; e++) {
                        flakes[e].update();
                        flakes[e].render(ctx);
                    }
                    /!*  一帧一帧的画 *!/
                    this.loop = requestAnimationFrame(function() {
                        drawSnow.apply(that);
                    });
                }
                /!* 调用及控制方法 *!/
                var snow = new snowFall({maxFlake:60});
                snow.start();*/

            }, function () {
                $('#logo').html('<a href="/">心悦君兮 | <font  class="font16">醉后不知天在水，满船清梦压星河</font></a>');
            });
        });


        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?f655f558c510211e38805f6b586e6b15";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

        //初始化所有类别信息
        var initAllBlogType = function () {
            //查询出文章类别
            //设置参数，表示查询所有的类别
            var params = {
                "data": "all"
            };
            $.ajax({
                url: '/selectBlogType',
                type: 'post',
                data: params,
                dataType: 'json',
                success: function (data) {
                    var typeName = '';
                    var data = data.data;
                    for (var i = 0; i < data.length; i++) {
                        typeName += "<li><a href='/result?keyboard=type_" + data[i].id + "'>" + data[i].typeName + "</a></li>";
                        //typeName += '<a onclick="searchType(' + data[i].id + ',\'' + data[i].typename + '\')" href="javascript:void(0);">' + data[i].typename + '</a> '
                    }
                    $(".sub").html(typeName);
                },
                error: function () {
                    layer.msg('请求太快，请稍后再试！', {
                        icon: 5
                    });
                }
            });
        }
        /*鼠标特效 */
        /*这个方法用来随机一个十六进制颜色代码，让每一次点击浮动文字的杨色不同*/
        function co() {
            var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
            var colorArray = colorElements.split(",");
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += colorArray[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        var a_idx = 0;

        jQuery(document).ready(function ($) {
            initAllBlogType();
            $("body").click(function (e) {
                /*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
                var a = ["富强", "民主", "文明", "和谐", "自由",
                    "平等",
                    "公正",
                    "法治",
                    "爱国",
                    "敬业",
                    "诚信",
                    "友善",
                    "真无聊啊，还真的把社会主义核心价值观给看完了，厉害！！"];
                var $i = $("<span/>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": co()
                });
                $("body").append($i);
                $i.animate({
                        "top": y - 180,
                        "opacity": 0
                    },
                    1500,
                    function () {
                        $i.remove();
                    });
            });
        });
    </script>
    <script type="text/javascript" color="255,140,0" opacity='0.7'
            zIndex="-1" count="99"
            src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
</div>
</body>
</html>